.w100 {
  width: 100% !important;
}

.w25 {
  width: 25% !important;
}

.w10 {
  width: 10% !important;
}

.h100 {
  height: 100% !important;
}

.vw100 {
  width: 100vw !important;
}

.vh100 {
  height: 100vh !important;
}

.vwh100 {
  width: 100vw !important;
  height: 100vh !important;
}

.wh100 {
  width: 100% !important;
  height: 100% !important;
}

.flex1 {
  flex: 1 !important;
}

.flex2 {
  flex: 2 !important;
}

.flex3 {
  flex: 3 !important;
}

.flex4 {
  flex: 4 !important;
}

.flex {
  display: flex !important;
}

.flex-i {
  display: inline-flex !important;
}

.flex-c {
  display: flex !important;
  flex-direction: column !important;
}

.flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.center {
  text-align: center;
}

.flex-w {
  display: flex !important;
  flex-wrap: wrap !important;
}

.jc-c {
  justify-content: center !important;
}

.jc-e {
  justify-content: flex-end !important;
}

.jc-sb {
  justify-content: space-between !important;
}

.ai-c {
  align-items: center !important;
}

.ai-e {
  align-items: flex-end !important;
}

.rel {
  position: relative !important;
}

.abs {
  position: absolute !important;
}

.fix {
  position: fixed !important;
}

.drag {
  -webkit-app-region: drag !important;
}

.no-drag {
  -webkit-app-region: no-drag !important;
}

.no-select {
  user-select: none !important;
}

.cursor-def {
  cursor: default !important;
}

.hand {
  cursor: pointer !important;
}

.overflow {
  overflow: auto !important;
}

.overflow-y {
  overflow-y: scroll !important;
}

.overflow-x-flex {
  overflow-x: scroll !important;
  width: 0 !important;
  flex: 1 0 auto !important;
}

.overflow-y-flex {
  overflow-y: scroll !important;
  height: 0 !important;
  flex: 1 0 auto !important;
}

.overflow-x {
  overflow-x: scroll !important;
}

.overflow-a {
  overflow-x: scroll !important;
  overflow-y: scroll !important;
}

.overflow-x-h {
  overflow-x: hidden !important;
}

.overflow-y-h {
  overflow-y: hidden !important;
}

.overflow-a-h {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

@thumb-bc: rgba(85, 85, 85, 0.4);
@thumb-bc-h: #dedfe1;

// 滚动条的样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: @thumb-bc;
}

::-webkit-scrollbar-thumb:hover {
  background-color: @thumb-bc-h;
}

// 隐藏滚动条
.overflow-t::-webkit-scrollbar-thumb {
  background: transparent;
}

// 隐藏滚动条，鼠标移上去就显示滚动条
.overflow-h::-webkit-scrollbar-thumb {
  background: transparent;
}

.overflow-h:hover::-webkit-scrollbar-thumb {
  background: @thumb-bc;
}

.overflow-h::-webkit-scrollbar-thumb:hover {
  background: @thumb-bc-h;
}

.white {
  color: #ffffff !important;
}

.white-bg {
  background-color: #ffffff !important;
}

.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !important;
}

.b-r-4 {
  border-radius: 4px !important;
}

.b-r-14 {
  border-radius: 14px !important;
}

.b-r-25 {
  border-radius: 25px !important;
}

.transparent-bg {
  background-color: transparent !important;
}

.myLoop(@i) when (@i <=50) {
  .p-@{i} {
    padding: @i + 0px !important;
  }

  .p-l-@{i} {
    padding-left: @i + 0px !important;
  }

  .p-r-@{i} {
    padding-right: @i + 0px !important;
  }

  .p-l-r-@{i} {
    padding-left: @i + 0px !important;
    padding-right: @i + 0px !important;
  }

  .p-t-@{i} {
    padding-top: @i + 0px !important;
  }

  .p-b-@{i} {
    padding-bottom: @i + 0px !important;
  }

  .p-t-b-@{i} {
    padding-top: @i + 0px !important;
    padding-bottom: @i + 0px !important;
  }

  .m-@{i} {
    margin: @i + 0px !important;
  }

  .m-l-@{i} {
    margin-left: @i + 0px !important;
  }

  .m-r-@{i} {
    margin-right: @i + 0px !important;
  }

  .m-l-r-@{i} {
    margin-left: @i + 0px !important;
    margin-right: @i + 0px !important;
  }

  .m-t-@{i} {
    margin-top: @i + 0px !important;
  }

  .m-b-@{i} {
    margin-bottom: @i + 0px !important;
  }

  .m-t-b-@{i} {
    margin-top: @i + 0px !important;
    margin-bottom: @i + 0px !important;
  }

  .myLoop((@i + 1));
}

.myLoop(0);

.font(@i) when (@i <=30) {
  .f-@{i} {
    font-size: @i + 0px !important;
  }

  .font((@i + 1));
}

.font(12);

.wh(@i) when (@i <=100) {
  .w-@{i} {
    width: @i + 0px !important;
  }

  .h-@{i} {
    height: @i + 0px !important;
  }

  .wh((@i + 1));
}

.wh(30);

.whBig(@i) when (@i <=700) {
  .w-@{i} {
    width: @i + 0px !important;
  }

  .h-@{i} {
    height: @i + 0px !important;
  }

  .whBig((@i + 5));
}

.whBig(105);

.fw(@i) when (@i <=800) {
  .fw-@{i} {
    font-weight: @i  !important;
  }

  .fw((@i + 50));
}

.fw(550);